<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>管理信息系统课程设计 | MISP</title>
        <#include "/inc/head.ftl"/>
        <@head/> 
</head>
<body>
    <div id="wrapper">
          <!-- Navigation -->
        <#include "/inc/nav.ftl"/>
        <@nav/>
        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                <div class="panel-body">
                        <button id="btn-add"  type="button" class="btn btn-success">添加新商品</button>
                        <button id="btn-edit"  type="button" class="btn btn-warning">修改商品信息</button>
                        <button id="btn-del"  type="button" class="btn btn-danger">删除商品</button>
                    </div>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">商品列表</div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover" id="list">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>商品名</th>
                                        <th>单价/元</th>
                                        <th>商品类别</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
           </div>
        <!-- /#page-wrapper -->
    </div>
    <!-- /#wrapper -->
    <!-- Page-Scripts  -->
    <script>
    $(document).ready(function() {
        var table = $('#list').DataTable({
            "ajax": '${contextPath}/commodity/list',
            "language": {
                "url": "${contextPath}/vendor/datatables/i18n/Chinese.json"
            },
            "columns": [
                 {"data": "id","visible" : false},
                 {"data": "name"},
                 {"data": "price"},
                 {"data": "typeName"}
           ],
           responsive: true,
           select: true //datatables select 插件
        });
        
        /* 添加新商品按钮 */
        $('#btn-add').click( function () {
            layer.open({  //layer弹出层
                  type: 2,
                  title:"添加新商品",
                  area: ['400px', '380px'],
                  fixed: false, //不固定
                  maxmin: true,
                  content: '${contextPath}/commodity/add',
                  end : function(index){
                      table.ajax.reload();
                  }
            });
        } ); 
        /* 修改商品信息按钮 */
        $('#btn-edit').click( function () {
            var rowData =table.rows( { selected: true } ).data().toArray();
             if(rowData.length==1){
                var id = rowData[0].id;
                layer.open({
                      type: 2,
                      title:"修改商品信息",
                      area: ['400px', '300px'],
                      fixed: false, //不固定
                      maxmin: true,
                      content:'${contextPath}/commodity/edit?id='+id,
                      end : function(index){
                          table.ajax.reload();
                      } 
                });
             }else{
                 layer.msg('请选择一行!', {time: 1000, icon:7});
             }
         });

        /* 删除按钮 */
       $('#btn-del').click( function () {
         var rowData =table.rows( { selected: true } ).data().toArray();  //得到datatables选中行的值并转成数组
         if(rowData.length==1){
           layer.msg('你确定删除该记录吗?', {time: 0 ,btn: ['确定', '取消'],yes: function(index){
              del(rowData[0].id);
              layer.close(index);
              }
          });
         }else{
           layer.msg('请选择一行!', {time: 1000, icon:7});
         }
      } ); 

       /* 删除操作 */
      function del(id){
          $.ajax({
            type : "post",
            url : "${contextPath}/commodity/delete",
            dataType : "json",
            data : { 
              "id" : id
            },
            success : function(data) {
              if (data.result){
                layer.msg(data.msg, {time: 1000, icon:1});
                  table.ajax.reload();
              }
            },
            error : function() {
              layer.msg('系统出错!', {time: 1000, icon:2});
            }
          });
      }
});
    </script>
    </body>
</html>

